<template>
    <div>
        <el-dialog :title="isAdd ? '添加角色' : '修改角色'" :visible.sync="isShow" center :before-close="offCheck">
            <el-form :model="roleInfo" :rules="rules" label-width="100px" ref="roleForm">
                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="roleInfo.rolename"></el-input>
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-tree :data="menuList" show-checkbox node-key="id" :props="defaultProps" default-expand-all
                        ref="tree">
                    </el-tree>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="roleInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="offCheck">取 消</el-button>
                <el-button type="primary" @click="addRole">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 引入接口地址
import { roleAdd, roleInfo, roleEdit } from "../../request/api"
// 引入辅助性函数
import { mapActions, mapGetters } from "vuex";
export default {
    computed: {
        // 获取菜单列表用于树状渲染
        ...mapGetters({
            menuList: "menu/getMenuList"
        })
    },
    props: ["isShow", "isAdd"],
    data() {
        return {
            roleInfo: {
                rolename: "",
                menus: "",
                status: 1
            },
            rules: {
                rolename: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            },
            defaultProps: {
                children: 'children',
                label: 'title'
            }
        }
    },
    methods: {
        // 获取角色列表
        ...mapActions({
            getRoleList: "role/roleList_Action"
        }),
        // 获取菜单列表
        ...mapActions({
            getMenuList: "menu/menuList_Action"
        }),
        // 点击取消
        offCheck() {
            // 子传父
            this.$emit("offCheck", false)
            // 清空表单信息
            this.$refs.roleForm.resetFields()
            this.roleInfo = {
                rolename: "",
                menus: "",
                status: 1
            }
            this.$refs.tree.setCheckedKeys([])
        },
        // 点击确定
        addRole() {
            this.$refs.roleForm.validate((flag) => {
                if (flag) {
                    // 将数组转化成字符串拼接
                    this.roleInfo.menus = this.$refs.tree.getCheckedKeys().join(",") || ""
                    if (this.isAdd) {
                        // 调用添加接口
                        roleAdd(this.roleInfo).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                // 重新渲染角色列表
                                this.getRoleList()
                                // 关闭对话框
                                this.offCheck()
                                this.$message.success(res.msg);
                            } else {
                                // 错误提示
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        // 调用编辑接口
                        roleEdit(this.roleInfo).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                // 重新渲染角色列表
                                this.getRoleList()
                                // 关闭对话框
                                this.offCheck()
                                this.$message.success(res.msg);
                            } else {
                                // 错误提示
                                this.$message.error(res.msg);
                            }
                        })
                    }
                } else {
                    // 错误提示
                    this.$message.error("请输入正确的内容");
                }
            })
        },
        // 编辑数据回显
        getOneRole(id) {
            // 调用查询一条角色信息接口
            roleInfo({ id }).then(res => {
                // 实现数据回显
                if (res.code == 200) {
                    this.roleInfo = res.list
                    this.roleInfo.id = id
                    this.$refs.tree.setCheckedKeys(
                        this.roleInfo.menus.split(",") || []
                    )
                }
            })
        }
    },
    mounted() {
        // 判断如果菜单列表没有数据就派遣行动获取数据
        if (this.menuList.length == 0) {
            this.getMenuList()
        }
    }
};
</script>

<style scoped>
</style>
